import React from 'react';

import PageTitle from 'component/page-title/PageTitle.jsx';
import ProductService from 'service/ProductService.jsx';
const productService = new ProductService();
import MUtil from 'util/MUtil.jsx';
const mUtil = new MUtil();


class ProductCategoryAdd extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      categorylist: [],
      parentId: 0,
      categoryName: ''
    }
  }
  componentDidMount() {
    this.loadCategoryList();
  }

  /**
   * 可以用于再次跳入该组件
   */
  componentDidUpdate(preProps, preState) {
    let oldPath = preProps.location.pathname,
      newPath = this.props.location.pathname,
      newId = this.props.match.params.categoryId || 0;
    if (oldPath !== newPath) {
      this.setState({ parentCategoryId: newId }
        , () => this.loadCategoryList());
    }
  }


  /**
   * 加载品类列表,显示父品类列表
   */
  loadCategoryList() {
    productService
      .getCategoryList(this.state.parentCategoryId)
      .then(res => {
        this.setState({ categorylist: res.data });
      }, errMsg => {
        mUtil.errorTips(errMsg);
      });
  }

  onValueChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  onSubmit(e) {
    let categoryName = this.state.categoryName.trim();
    if (categoryName) {
      productService.saveCategory({
        parentId: this.state.parentId,
        categoryName,
      })
        .then(res => {
          mUtil.successTips(res.data);
          this.props.history.push('/product-category/index');
        }
          , errMsg => mUtil.errorTips(errMsg));
    } else {
      mUtil.errorTips('请输入品类名称');
    }
  }

  render() {

    return (
      <div id="page-wrapper">
        <PageTitle title='添加品类' />
        <div className="row">
          <div className="col-md-12">
            <div className="form-horizontal">
              <div className="form-group">
                <label className="col-md-2 control-label">所属品类</label>
                <div className="col-md-5">
                  <select name="parentId" className="form-control"
                    onChange={e => this.onValueChange(e)}>
                    <option value="0">根品类/</option>
                    {
                      this.state.categorylist.map((category, index) => {
                        return <option value={category.id} key={index}>根品类/{category.name}</option>
                      })
                    }
                  </select>
                </div>
              </div>
              <div className="form-group">
                <label className="col-md-2 control-label">品类名称</label>
                <div className="col-md-5">
                  <input type="text" className="form-control" placeholder="请输入品类名称"
                    name="categoryName"
                    value={this.state.name}
                    onChange={e => this.onValueChange(e)} />
                </div>
              </div>

              <div className="form-group">
                <div className="col-md-offset-2 col-md-10">
                  <button type="submit" className="btn btn-primary" onClick={e => this.onSubmit(e)}>提交</button>
                </div>
              </div>
            </div>

          </div>
        </div>

      </div>
    );
  }
}

export default ProductCategoryAdd;